
<title>Puzzle Admin-角色管理</title>

<div class="page-header">
    <h4>
        <i class="glyphicon glyphicon-signal"></i>
        角色管理
    </h4>
</div>

<div class="row" id="">
    <div class="col-xs-12">
        <div id="role-gridview" class="gridview">
            <div class="grid-filter">
                <input type="text input-sm" style="height: 29px" class="txt" name="roleName" placeholder="名称" />
                <select name="roleType" style="height: 29px;width: 160px;">
                    <option value="0">请选择角色类型</option>
                    <option value="1">系统角色</option>
                    <option value="2">自定义角色</option>
                </select>
                <a class="btn btn-xs btn-action btn-purple" data-action="search" style="margin-top: -2px;margin-left: 10px;"><i class="ace-icon fa fa-search"></i>搜索</a>
            </div>

            {{include file="/inc/module_action.html"}}

            <div class="grid-table">
                <table class="table table-striped table-bordered table-hover table-list table-tree">
                    <thead>
                    <tr>
                        <th width="50">
                            <label class="position-relative">
                                <input type="checkbox" class="ace grid-cb-all" />
                                <span class="lbl"></span>
                            </label>
                        </th>
                        <th width="100">编号</th>
                        <th>名称</th>
                        <th>类型</th>
                        <th>排序号</th>
                        <th width="120">操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr>
                        <td colspan="6">
                            <div class='loading'><i class='ace-icon fa fa-spinner bigger-200 orange'></i><span class="text">正在加载</span></div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="pagination-box">

                </div>
            </div>

            <div class="grid-form save-form" style="">
                <div class="overlay"></div>
                <div class="widget-box widget-color-blue light-border ui-sortable-handle" style="width:600px;">
                    <div class="widget-header">
                        <h5 class="widget-title smaller"></h5>

                        <div class="widget-toolbar">
                            <a href="#" class="btn-action" data-action="hide">
                                <i class="ace-icon fa fa-close white"></i>
                            </a>
                        </div>
                    </div>
                    <div class="widget-body">
                        <div class="widget-main">
                            <div class="alert-info red"></div>
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        名称
                                    </label>
                                    <div class="col-sm-9">
                                        <input type="text" id="roleName" name="roleName" placeholder="名称" class="txt input-sm col-sm-5 ">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        排序号
                                    </label>

                                    <div class="col-sm-9">
                                        <input type="text" data-init="0" id="sortOrder"  name="sortOrder" placeholder="排序号" class="txt input-sm col-sm-2">
                                    </div>
                                </div>
                                <div class="clearfix form-actions">
                                    <input type="hidden" name="roleId" value="" />
                                    <a class="btn btn-sm btn-action" data-action="reset">
                                        <i class="ace-icon fa fa-undo"></i>
                                        重置
                                    </a>
                                    &nbsp; &nbsp; &nbsp;
                                    <a class="btn btn-sm btn-primary btn-action" data-action="save">
                                        <i class="ace-icon fa fa-check"></i>
                                        提交
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid-form search-form "></div>

        </div>

        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->
<script type="text/javascript">
    $('.page-content-area').ace_ajax('loadScripts', [null, null], function() {
        $("#role-gridview").gridview({
            url: "systemrole/list.do",
            form: {
                url: "systemrole/action.do",
                check:function(){
                    var roleName=$("#roleName").val().trim();
                    var sortOrder=$("#sortOrder").val().trim();
                    if(roleName == ""){
                        console.log("check form");
                        $("#roleName").focus();
                        return "角色名称不能为空";
                    }
                    else if(sortOrder<0 || isNaN(sortOrder)){
                        console.log("check form");
                        $("#sortOrder").focus();
                        return "排序号必须大于等于0且必须为数字";
                    }
                    else{
                        return true;
                    }
                }
            },
            jsonReader: {
                key_field: 'roleId'
            },
            columns: [
                {
                    name: "checkbox"
                },
                {
                    name: "roleId"
                },
                {
                    name: "roleName"
                },
                {
                    name: "roleType",
                    value: "roleTypeName"
                },
                {
                    name: "sortOrder",
                    format: function(opts, column, row){
                        return "<td><span class='label label-sm label-info arrowed arrowed-righ'>" + row[column.name] + "</span></td>";
                    }
                },
                {
                    name: "actions",
                    list: ["edit", "delete"]
                }
            ]
        });
    });
</script>
